/**
 * 影院页面
 * huruqing
 */

var cinemas = [];
var cinema = {

    // 1. 请求影院列表数据
    getCinamList: function() {
        var self = this;
        var url = 'http://huruqing.cn:3000/api/cinema/getList';
        $.ajax({
            type: 'get',
            url: url,
            data: {

            },
            dataType: 'json',
            success: function(res) {
                console.log(res);
                if (res.code === '666') {
                    self.render(res.cinemas);
                    cinemas = res.cinemas;
                } else {
                    alert(res.msg);
                }
            }
        })
    },


    // 2. 渲染影院列表
    render: function(list) {
        var str = '';
        list.forEach(function(item) {
            str += ` <div class="lists bg-fff bd-gray">
            <p class="flex jc-sb">
                <span class="f15">${item.name}</span>
                <span class="f12 yellow">&yen;69起</span>
            </p>
            <p class="flex jc-sb mt-10">
                <span class="f12 gray">深圳市福田区侨香路嘉信茂购物中心三层</span>
                <span class="f12 gray">距离未知</span>
            </p>
        </div>`;
        })
        document.querySelector('#list').innerHTML = str;
    },

    // 3. 显示和关闭区域列表
    showArea() {
        // 获取#area节点
        var $area = document.querySelector('#area');
        // 判断标签 #area 是否含有dsn, 有的话就把它去掉, 否则就加上
        if ($area.className.includes('dsn')) {
            $area.className = "bg-fff flex list pt-10 pb-10";
        } else {
            $area.className = "bg-fff flex list pt-10 pb-10 dsn";
        }
    },

    // 4. 选择区域的时候,区域列表隐藏
    selectArea() {
        // (1)把所有li的acitve 去掉 
        var $active = document.querySelector('#area li.active');
        if ($active) {
            $active.className = 'item fcc f12';
        }

        // (2)给选中的li添加acitve
        var $li = event.currentTarget;
        $li.className = $li.className + ' active';

        // (3)关闭区域列表
        // var $area = document.querySelector('#area');
        // $area.className = "bg-fff flex list pt-10 pb-10 dsn";

        // 获取选中的区域文本
        var text = $li.innerText;
        // 过滤影院列表,并重新渲染影院列表 
        var newList = cinemas.filter(function(item) {
            return item.areaName === text;
        });

        // console.log('新的列表', newList);
        // (4)重新渲染列表
        if (text === '全部') {
            this.render(cinemas);
        } else {
            this.render(newList);
        }

    }
}

cinema.getCinamList();